<template>
  <div>
    <div class="banner" @click="handleBannerClick">
      <img
        src="https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20198/edf0c7e28965eafa143ff10b54477263.jpg"
        class="img"
        alt
      />
      <div class="banner-info">
        <div class="banner-title">大连疯狂海洋公园</div>
        <div class="banner-num">
          <span class="iconfont">&#xe625;</span>
          图片
        </div>
      </div>
    </div>
    <fade>
      <gallary :imgs="imgs" @close="close" v-if="showGallary"></gallary>
    </fade>
  </div>
</template>
<script>
import gallary from "common/gallary/gallary";
import fade from "common/fade/fade";
export default {
  name: "banner",
  components: { gallary, fade },
  methods: {
    handleBannerClick() {
      this.showGallary = true;
    },
    close() {
      this.showGallary = false;
    }
  },
  data() {
    return {
      showGallary: false,
      imgs: [
        "http://h-des-activity-fecp.qunarzz.com/h_des_activity_fe_h_des_activity_fe/973dc1ae0da73a58410186df08ff25cb.jpg",
        "http://h-des-activity-fecp.qunarzz.com/h_des_activity_fe_h_des_activity_fe/973dc1ae0da73a58410186df08ff25cb.jpg"
      ]
    };
  }
};
</script>
<style lang='stylus' scoped>
.banner {
  height: 0;
  overflow: hidden;
  padding-bottom: 55%;
  background: #ccc;
  position: relative;

  img {
    width: 100%;
  }

  .banner-info {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 0.6rem;
    color: white;
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

    .banner-title {
      flex: 1;
      font-size: 0.32rem;
      padding: 0 0.2rem;
    }

    .banner-num {
      margin-top: 0.12rem;
      padding: 0 0.4rem;
      height: 0.32rem;
      line-height: 0.4rem;
      background: rgba(0, 0, 0, 0.8);

      .iconfont {
        font-size: 0.3rem;
        line-height: 0.3rem;
      }
    }
  }
}

.back {
  top: 0;
  left: 0;
  color: white;
  position: absolute;
  width: 0.86rem;
  height: 0.6rem;
  line-height: 0.6rem;
}
</style>